<!--固件详情-->
<template>
  <div class="firmware-develop-details">
    <div class="header">
      <div class="header-left">
        <div class="top">
          <span class="back" @click="goBack"><i class="iconfont icon-fanhui" style="font-size: 24px;"></i></span>
          <span class="title">固件详情</span>
        </div>
      </div>
      <div>
        <el-form ref="form" class="form-wrap" label-position="left" label-width="140px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="固件名称">
                <span>{{ rowsData.name }}</span>
              </el-form-item>
              <el-form-item label="固件Key">
                <span>{{ rowsData.id }}</span>
              </el-form-item>
              <el-form-item label="固件类型">
                <span>{{ rowsData.componentTypeName }}</span>
              </el-form-item>
              <el-form-item label="固件升级超时时间">
                <span>{{ rowsData.timeoutTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="升级通道号">
                <span>{{ rowsData.upgradeChannelNumber }}</span>
              </el-form-item>
              <el-form-item label="自定义编号">
                <span>{{ rowsData.customNumber }}</span>
              </el-form-item>
              <el-form-item label="更新时间">
                <span>{{ rowsData.updateTime }}</span>
              </el-form-item>
              <el-form-item label="备注说明">
                <span>{{ rowsData.description }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="btn" @click="editFirmware">编辑固件</div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div>
      <div class="title">固件版本管理</div>
      <el-form ref="form" :inline="true" class="search-form">
        <el-col :span="24">
          <el-form-item label="固件版本">
            <el-input v-model="formSearch.version" placeholder="请输入固件版本" clearable />
          </el-form-item>
          <el-form-item label="上架状态">
            <el-select v-model="formSearch.isListed" clearable>
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-button
            type="primary"
            size="14"
            @click="queryVersionList()">查询</el-button>
          <el-button
            type="primary"
            size="14"
            class="add-version-btn"
            @click="creatVersion">新建固件版本</el-button>
        </el-col>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#F5F6F7' }"
        size="medium">
        <el-table-column prop="version" label="固件版本"> </el-table-column>
        <el-table-column prop="fileName" label="固件包"> </el-table-column>
        <el-table-column prop="criticalVersionFlag" label="关键版本">
          <template slot-scope="scope">
            <span>{{ scope.row.criticalVersionFlag ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isListed" label="上架状态">
          <template slot-scope="scope">
            <span>{{ scope.row.isListed ? '已上架' : '未上架' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sign" label="校验值(MD5）"> </el-table-column>
        <el-table-column prop="size" label="文件大小">
          <template slot-scope="scope">
            <span>{{ scope.row.size / 1024 / 1024 }}M</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="版本说明"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="260">
          <template slot-scope="scope">
            <el-button type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleDownload(scope.row)">下载</el-button>
            <el-button v-if="!scope.row.isListed" type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="!scope.row.isListed" type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleLaunch(scope.row)">固件上架</el-button>
            <el-button v-if="!scope.row.isListed" type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleDetele(scope.row)">删除</el-button>
            <el-button v-if="scope.row.isListed" type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleDown(scope.row)">停用下架</el-button>
            <el-button v-if="scope.row.isListed" type="text" :disabled="rolesCode === 'SALE'" size="operate" @click="handleModifyLaunch(scope.row)">修改上架范围</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <editFirmware
        ref="editFirmware"
        :rows-data="rowsData"
        :query-component-info="queryComponentInfo"
      />
      <addOrEditFirmwareVersion
        ref="addOrEditFirmwareVersion"
        :add-or-edit-type="addOrEditType"
        :query-version-list="queryVersionList"
        page-type="firmwareDetails"
        :rows-data="rowsData"
        :rows-inline="rowsInline"
      />
      <launchOrModify
        ref="launchOrModify"
        :launch-rows-data="launchRowsData"
        :query-version-list="queryVersionList"
        :launch-or-modify-type="launchOrModifyType"
      />
    </div>
  </div>
</template>
<script>
import { getFirmwareVersionList, deleteFirmwareVersion, firmwareVersionRelease, getComponentInfo } from "@/api/product/firmware"
import editFirmware from './editFirmware.vue'
import addOrEditFirmwareVersion from './addOrEditFirmwareVersion.vue'
import launchOrModify from './launchOrModify.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'firmwareDevelopDetails',
  components: { editFirmware, addOrEditFirmwareVersion, launchOrModify },
  data() {
    return {
      editInfoVisible: false, // 编辑固件基本信息弹窗是否显示
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      loading: false,
      formSearch: {
        version: '', // 固件版本
        isListed: '', // 上架状态010
        componentId: '' // 固件ID
      },
      statusOptions: [
        { value: false, label: '未上架' },
        { value: true, label: '已上架' }
      ],
      addOrEditType: 'add', // 新建或编辑固件版本
      rowsData: {}, // 固件管理带过来的选中行数据
      rowsInline: {}, // 固件版本管理列表行中数据
      launchOrModifyType: 'launch', // 上架或修改
      launchRowsData: {} // 上架或修改行数据
    }
  },
  computed: {
    ...mapGetters(['rolesCode'])
  },
  mounted() {
    this.formSearch.componentId = this.$route.query.componentInfoId
    this.queryVersionList()
    this.queryComponentInfo()
  },
  methods: {
    // 获取固件详情
    queryComponentInfo() {
      const params = {
        componentInfoId: this.formSearch.componentId
      }
      getComponentInfo(params).then(res => {
        this.rowsData = res.data.data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 固件版本列表
    queryVersionList() {
      this.loading = true
      const params = {
        current: this.currentPage,
        size: this.pageSize,
        ...this.formSearch
      }
      getFirmwareVersionList(params).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryVersionList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryVersionList()
    },
    // 返回固件列表
    goBack() {
      this.$router.go(-1)
    },
    // 编辑固件
    editFirmware() {
      this.$refs.editFirmware.editInfoVisible = true
    },
    // 新建固件版本
    creatVersion() {
      this.addOrEditType = 'add'
      this.$refs.addOrEditFirmwareVersion.firmwareVersionVisible = true
    },
    // 下载
    handleDownload(row) {
      this.downBlobFile(row.url, {}, row.fileName)
    },
    // 编辑
    handleEdit(row) {
      this.rowsInline = row
      this.addOrEditType = 'edit'
      this.$refs.addOrEditFirmwareVersion.firmwareVersionVisible = true
    },
    // 固件上架
    handleLaunch(row) {
      this.launchRowsData = row
      this.launchOrModifyType = 'launch'
      this.$refs.launchOrModify.launchOrModifyVisible = true
    },
    // 修改上架范围
    handleModifyLaunch(row) {
      this.launchRowsData = row
      this.launchOrModifyType = 'modify'
      this.$refs.launchOrModify.launchOrModifyVisible = true
    },
    // 停用下架
    handleDown(row) {
      const params = {
        firmwareVersionId: row.id,
        isListed: !row.isListed
      }
      firmwareVersionRelease(params).then(res => {
        this.$message.success('停用下架成功')
        this.queryVersionList()
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 删除
    handleDetele(row) {
      const params = {
        firmwareVersionIdList: [row.id]
      }
      deleteFirmwareVersion(params).then(res => {
        this.queryVersionList()
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.firmware-develop-details {
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #252525;
  }

  .header {
    margin-bottom: 15px;

    .header-left {
      .top {
        display: flex;
        align-items: center;

        .back {
          margin-right: 13px;
          cursor: pointer;
        }
      }
    }

    .form-wrap {
      background: #F5F6F7;
      margin: 15px 0;
      padding: 20px 20px 0 20px;
    }

    ::v-deep .el-form-item__label {
      font-weight: 600;
    }

    .btn {
      color: #275FE8;
      cursor: pointer;
    }
  }

  .search-form {
    margin-top: 20px;

    .add-version-btn {
      float: right;
    }
  }
}
</style>
